<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(98, 159, 184);
            overflow: hidden;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <button class="back">back</button>
    <div class="box"></div>
</body>
<script>
    //     var box = document.getElementsByClassName("box")[0];
    //     var back = document.getElementsByClassName("back")[0];
    //     var arr = [];   // 记录每次移动时的坐标;


    // // 回放
    //     back.onclick = function() {
    //         var index = arr.length - 1; 
    //         var timer = setInterval(function(){
    //              index--;
    //              var obj = arr[index];
    //              var x = obj.x;
    //              var y = obj.y;
    //              box.style.left = x + "px";
    //              box.style.top = y + "px";
    //              if(index == 0) {
    //                  clearInterval(timer);
    //                  arr = [];
    //              }
    //         },10)
    //     }

    // // 按下时
    //     box.onmousedown = function(e) {
    //         var e = e || window.event;
    //         var posX = e.offsetX;
    //         var posY = e.offsetY;
    // // 移动时
    //         document.onmousemove = function() {
    //             var e = e || window.event;
    //             var x = e.pageX - posX;
    //             var y = e.pageY - posY;
    //             var obj = {
    //                 x : x,
    //                 y : y,
    //             }
    //             arr.push(obj);
    //             // console.log(arr);

    //             box.style.left = x + "px";
    //             box.style.top = y + "px";
    //         }
    // // 松开时
    //         document.onmouseup = function() {
    //             var e = e || window.event;
    //             document.onmousemove = null;
    //         }

    //     }


    var drag = {
        target: document.getElementsByClassName("box")[0],    // 拖拽的元素

        dragStart() {
            // this -> drag(字面量对象)

            // 如何让事件中的代码访问drag对象
            // 1.用中间变量_this 记录this的指向     (ES5)
            // 2.使用箭头函数
            // 3.利用bind   (IE8及以下不支持 可以利用call apply 模拟封装)
            var _this = this;

            // 鼠标按下时  记录按下的位置
            this.target.onmousedown = function (e) {  // 事件中的this -> 绑定事件的当前元素
                var e = e || window.event;
                // 需要将局部变量posX，posY 数据传递出去
                var posX = e.offsetX;
                var posY = e.offsetY;
                // _this.posX = posX;
                // _this.posY = posY;


                _this.dragMove()    // 先按下再移动
                _this.dragEnd()    // 先按下再移动

                //错误示范 事件中的this -> 绑定事件的当前元素 box
                // this.posX = posX;
                // this.posY = posY;

            }.bind(this);  // 第三种方法
        },
        dragMove() {
            // this -> drag(字面量对象)

            var _this = this;
            document.onmousemove = function (e) {
                var e = e || window.event;
                // 需要获取posX，posY
                var x = e.pageX - _this.posX;
                var y = e.pageY - _this.posY;
                console.log(x, y)
                _this.target.style.left = x + "px";
                _this.target.style.top = y + "px";
            }
        },
        dragEnd() {
            document.onmouseup = function () {
                var e = e || window.event;
                document.onmousemove = null;
            }
        }
    }
    drag.dragStart();

</script>

</html>